<template>
  <div class="echart_container">
    <div class="echart_aside">
      <div class="item" id="echarts4"></div>
      <div class="item" id="echarts5"></div>
      <div class="item" id="echarts6"></div>
    </div>
    <div class="echart_middle">
      <div class="item_number">
        <div class="text">人次</div>
        <div class="number">
          68650
        </div>
      </div>

      <div class="item_number">
        <div class="text">架次</div>
        <div class="number">
          33351
        </div>

      </div>
    </div>
    <div class="echart_aside">
      <div class="item" id="echarts1"></div>
      <div class="item" id="echarts2"></div>
      <div class="item" id="echarts3"></div>
    </div>

    <!--定义画布  background: rgba(255,255,255,0.17)-->
    <!-- <div style="position: absolute;left: 10px;top: 300px;background: rgba(0, 0, 0, 0.09);padding:20px 10px;border-radius: 10px;">

    <canvas id="canvas" width="100px" height="480px" style="">
    </canvas>
  </div> -->

    <!-- <div
    style="position: absolute;left:1530px;top:160px;background:rgba(0,0,0,0.15);border-radius: 10px;padding: 20px 10px;z-index:10;">
    <div id="echarts3" style="width: 400px;height: 240px;"></div>
  </div> -->

    <!-- <div
    style="position: absolute;left:1530px;top:160px;background:rgba(0,0,0,0.15);border-radius: 10px;padding: 20px 10px;z-index:10;">
    <div id="echarts3" style="width: 400px;height: 240px;"></div>
  </div> -->

    <!-- <div
    style="position: absolute;left:1530px;top:600px;background:rgba(0,0,0,0.15);border-radius: 10px;padding: 0px 10px;z-index:10;">
    <div id="echarts4" style="width: 400px;height: 360px;"></div>
  </div> -->
  </div>
</template>

<script>
import line from "./echarts/line.js";
import ring from "./echarts/ring.js";
// import radar from "./echarts/radar.js";
// import meter from "./echarts/meter.js";
import shuizhu from "./echarts/shuizhu.js";
import shuzhu from "./echarts/shuzhu.js";
import water from "./echarts/water.js";
import linedan from "./echarts/linedan.js";
export default {
  name: "echarts",
  mounted: function () {
    linedan("echarts1");
    shuzhu("echarts2");

    water("echarts3");

    line("echarts4");
    ring("echarts5");

    shuizhu("echarts6");
    // water("echarts4");
  },
};
</script>

<style scoped lang="scss">
.echart_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
  align-items: flex-end;

  .echart_aside {
    width: 400px;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      width: 380px;
      height: 32.5%;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 10px;
      padding: 0 10px;
      z-index: 10;
      // overflow: hidden;
    }
  }

  .echart_middle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 820px;
    height: 140px;

    .item_number {
      width: 400px;
      height: 140px;
      font-size: 16px;
      color: #33bbbb;
      padding: 10px 20px;
      background: rgba(0, 0, 0, 0.1);
      width: 230px;
      border-radius: 10px;

      .text {
        color: #ffffff;
        border-bottom: #004444 solid 1px;
        padding: 10px 20px;
        font-size: 16px;
      }

      .number {
        letter-spacing: 16px;
        font-size: 64px;
        color: #00ffff
      }
    }

  }
}
</style>
